<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='操作日志',active='logs',open='setting'">
    <header th:replace="index/fragments/header::header-bootstrap4(${title},${active},${open})"></header>
    <style>
        /* 后面的提示文字颜色 */
        [type="file"] {
            color: gray;
        }

        /* 主按钮的样式自定义 */
        ::file-selector-button {
            /*height: 2rem;*/
            font-size: 1rem;
            color: #fff;
            border-radius: .25rem;
            border: 1px solid #2a80eb;
            padding: .5rem 1rem;
            background-color: #2a80eb;
            box-sizing: border-box;
            font-family: inherit;
            cursor: pointer;
        }
    </style>
    <body class="hold-transition sidebar-mini">
        <div class="wrapper">
            <div th:replace="index/fragments/header::header-body-bootstrap4"></div>

            <!-- Content Wrapper. Contains page content -->
            <div class="content-wrapper">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <!--            <div class="container-fluid">-->
                    <!--                <div class="row mb-2">-->
                    <!--                    <div class="col-sm-6">-->
                    <!--                        <h1>DataTables</h1>-->
                    <!--                    </div>-->
                    <!--                    <div class="col-sm-6">-->
                    <!--                        <ol class="breadcrumb float-sm-right">-->
                    <!--                            <li class="breadcrumb-item"><a href="#">Home</a></li>-->
                    <!--                            <li class="breadcrumb-item active">DataTables</li>-->
                    <!--                        </ol>-->
                    <!--                    </div>-->
                    <!--                </div>-->
                    <!--            </div>-->
                </section>
                <div class="modal fade" id="infoModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">新增</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="col-md-12 column">
                                    <form role="form" id="insertForm">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="form-group col-md-12">
                                                    <label>账号</label>
                                                    <input type="text" value="" name="username" placeholder=""
                                                           class="form-control j-projectNum"/>
                                                </div>
                                                <div class="form-group col-md-12">
                                                    <label>密码</label>
                                                    <input type="password" value="" name="password" placeholder=""
                                                           class="form-control j-password"/>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label>角色</label>
                                                    <select class="form-control e-role" name="role">
                                                        <option value="1" selected>平台管理员</option>
                                                        <option value="2">用户管理员</option>
                                                    </select>
                                                </div>
                                            </div>

                                        </div>

                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" onclick="insertInfo()">保存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <div class="modal fade" id="editModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">新增</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="col-md-12 column">
                                    <form role="form" id="editForm">
                                        <div class="card-body">
                                            <input type="hidden" value="" name="id" placeholder="请输入"
                                                   class="form-control j-id"/>

                                            <div class="form-group col-md-12">
                                                <label>账号</label>
                                                <input type="text" value="" name="username" placeholder=""
                                                       class="form-control j-username"/>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label>密码</label>
                                                <input type="password" value="" name="password" placeholder=""
                                                       class="form-control j-password"/>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label>角色</label>
                                                <select class="form-control j-role" name="role">
                                                    <option value="1" selected>平台管理员</option>
                                                    <option value="2">用户管理员</option>
                                                </select>
                                            </div>


                                        </div>

                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer justify-content-between">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" onclick="editInfo()">保存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- Main content -->
                <section class="content">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">
                                        <table id="example" class="table table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>账号</th>
                                                <th>ip</th>
                                                <th>时间</th>
                                                <th>状态</th>
<!--                                                <th>操作</th>-->
                                            </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.card-body -->
                                </div>
                                <!-- /.card -->
                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.container-fluid -->
                </section>
                <!-- /.content -->
            </div>
            <!-- /.content-wrapper -->
        </div>
        <!-- ./wrapper -->
        <div th:replace="index/fragments/footer :: footer"></div>
        <!-- Page specific script -->
        <script>

            $.fn.dataTable.ext.buttons.create = {
                className: 'new-buttons bg-primary',

                action: function (e, dt, node, config) {
                    $('#infoModal').modal('show');
                }
            };

            // datatables
            const table = $('#example').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                // "ordering": false,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "ajax": {
                    "url": "/admin/logs/list",
                    "dataSrc": "data",//这里是后台返回的数据对象
                    "data": function (d) {//d 是原始的发送给服务器的数据，默认很长。
                        let param = {};//因为服务端排序，可以新建一个参数对象
//                 param.start = d.start;//开始的序号
//                 param.length = d.length;//要取的数据的条数

                        return param;//自定义需要传递的参数。
                    }
                },
                dom: 'Bfrtip',
                buttons: [
                    // {
                    //     extend: 'create',
                    //     text: '添加'
                    // }

                ],
//         "createdRow": function (row, data, index) {
//             /* 设置表格中的内容居中 */
//             $('td', row).attr("class", "text-center");
//         },
                //定义列: 取相应属性字段<th>ID</th>
                "columns": [
                    {
                        "data": "id",
                    },
                    {
                        "data": "username",
                    },
                    {
                        "data": "ip",
                    },
                    {
                        "data": "createTime",
                    },
                    {
                        "data": "status",
                        "render": function (data, type, row, callback) {
                            //类型：0导航菜单；1操作按钮。
                            switch (data) {
                                case 0:
                                    return '<span class="badge bg-success">登录成功</span>';
                                    break;
                                case 1:
                                    return '<span class="badge bg-red">登录失败</span>';
                                    break;
                                case 2:
                                    return '<span class="badge bg-info">用户管理员</span>';
                                    break;
                            }
                        }
                    },
                    //操作列
                    // {
                    //     "data": "id",
                    //     "render": function (data, type, row, meta) {
                    //         let editBtn = '<a class="btn btn-info" data-toggle="modal" data-target="#editModal" onclick="getInfo(\'' + data + '\');" >编辑</a>'
                    //         let updateBtn = '<a class="btn btn-success" onclick="updateStatus(\'' + data + '\',\'' + row.status + '\');" >处理</a>'
                    //         let deleteBtn = '<a class="btn btn-danger" onclick="deleteTarget(\'' + data + '\');" >删除</a>'
                    //
                    //         if (row.role > 0) {
                    //             return (editBtn + deleteBtn);
                    //         } else {
                    //             return ('');
                    //         }
                    //
                    //
                    //     }
                    // }
                ],
                "language": {
                    "lengthMenu": "每页 _MENU_ 条记录",
                    "zeroRecords": " ",
                    "info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条",
                    "infoEmpty": "无记录",
                    "infoFiltered": "(从 _MAX_ 条记录过滤)",
                    "search": "搜索",
                    "processing": "载入中",
                    "paginate": {
                        "first": "首页",
                        "previous": "上一页",
                        "next": "下一页",
                        "last": "尾页"
                    }
                },
            });

            table.buttons().container().appendTo($('.dataTables_filter', table.table().container()));


            $("#infoModal").on("hidden.bs.modal", function () {
                $('.targetId').val(0)
                $('#bannerImage').val('')
                $('#imgShow').attr('src', '');
                $('#filed').val('')
            });

            $("#infoModal").on("hidden.bs.modal", function () {
                $("#insertForm")[0].reset();
            });

            function insertInfo() {
                let data = $('#insertForm').serialize()
                Confirm.fire({
                    title: '确认保存?',
                    preConfirm: function () {
                        tale.post({
                            url: '/admin/insert',
                            data: data,
                            success: function (result) {

                                if (result.code == 200) {
                                    Toast.fire({
                                        icon: 'success',
                                        title: '操作成功'
                                    })
                                    $('#infoModal').modal('hide');
                                    table.ajax.reload(null, false)

                                } else {
                                    Toast.fire({
                                        icon: 'error',
                                        title: result.msg || '操作失败'
                                    })
                                }
                            },
                            error: function (e) {
                                Toast.fire({
                                    icon: 'error',
                                    title: e.msg || '操作失败'
                                })
                            }
                        })
                    }
                })
            }

            function editInfo() {
                let data = $('#editForm').serializeArray()
                Confirm.fire({
                    title: '确认保存?',
                    preConfirm: function () {
                        tale.post({
                            url: '/admin/update',
                            data: data,
                            success: function (result) {
                                if (result.code == 200) {

                                    Toast.fire({
                                        icon: 'success',
                                        title: '操作成功'
                                    })
                                    $('#editModal').modal('hide');
                                    table.ajax.reload(null, false)
                                } else {
                                    Toast.fire({
                                        icon: 'error',
                                        title: result.msg || '操作失败'
                                    })
                                }
                            },
                            error: function (e) {
                                Toast.fire({
                                    icon: 'error',
                                    title: e.msg || '操作失败'
                                })
                            }
                        })

                    }
                })
            }

            function getInfo(id) {
                tale.get({
                    url: '/admin/info',
                    data: {
                        id: id
                    },
                    success: function (res) {
                        let data = res.data
                        let dataName = Object.keys(data);
                        for (let k in dataName) {
                            // console.log('.p-' + dataName[k] + ',' + data[dataName[k]])
                            $('.j-' + dataName[k]).val(data[dataName[k]])
                        }

                    }
                })
            }

            function updateStatus(id, status) {
                Confirm.fire({
                    title: '确认处理？',
                    preConfirm: function () {
                        if (status == 0) {
                            status = 1
                        } else {
                            status = 0
                        }
                        tale.post({
                            url: '/admin/banner/update',
                            data: {
                                id: id,
                                status: status
                            },
                            success: function (result) {
                                if (result.code == 200) {

                                    Toast.fire({
                                        icon: 'success',
                                        title: '操作成功'
                                    })
                                    table.ajax.reload(null, false)
                                } else {
                                    Toast.fire({
                                        icon: 'error',
                                        title: result.msg || '操作失败'
                                    })
                                }
                            },
                            error: function (e) {
                                Toast.fire({
                                    icon: 'error',
                                    title: e.msg || '操作失败'
                                })
                            }
                        })
                    }
                })


            }

            //删除
            function deleteTarget(id) {
                Confirm.fire({
                    title: '确认删除？',
                    preConfirm: function () {
                        tale.post({
                            url: '/admin/banner/delete',
                            data: {id: id},
                            success: function (result) {
                                if (result.code == 200) {
                                    Toast.fire({
                                        icon: 'success',
                                        title: '操作成功'
                                    })
                                    table.ajax.reload(null, false)
                                } else {
                                    Toast.fire({
                                        icon: 'error',
                                        title: result.msg || '操作失败'
                                    })
                                }
                            },
                            error: function (e) {
                                Toast.fire({
                                    icon: 'error',
                                    title: e.msg || '操作失败'
                                })
                            }
                        });
                    }
                })


            }
        </script>
    </body>
</html>
